<!--
 * @Description: 
 * @Author: xiongkuobiao
 * @Date: 2023-02-03 12:19:58
 * @LastEditors: xiongkuobiao
 * @LastEditTime: 2023-04-12 09:36:38
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    #container {
      height: 100vh;
      overflow: auto;
    }
    .sunshine {
      display: flex;
      padding: 10px;
    }
    img {
      width: 150px;
      height: 150px;
    }
  </style>
  <body>
    <div id="container"></div>
    <script src="./index.js"></script>
    <script>
      // 16.7ms 动画 1s/60 动画更加流畅
      // 只会产生一次重排重绘,对cpu和性能压力好
      // 透明度为0 或者切换页签tab失焦,都会暂定动画

      //   const renderList = async () => {
      //     console.time("列表时间");
      //     const list = await getList();
      //     list.forEach((item) => {
      //       const div = document.createElement("div");
      //       div.className = "sunshine";
      //       div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`;
      //       container.appendChild(div);
      //     });
      //     console.timeEnd("列表时间");
      //   };
      //   renderList();
      //   const renderList = async () => {
      //     console.time("列表时间");
      //     const list = await getList();
      //     const total = list.length;
      //     const page = 0;
      //     const limit = 100;
      //     const totalPage = Math.ceil(total / limit);

      //     const render = (page) => {
      //       if (page >= totalPage) return;
      //       setTimeout(() => {
      //         for (let i = page * limit; i < page * limit + limit; i++) {
      //           const item = list[i];
      //           const div = document.createElement("div");
      //           div.className = "sunshine";
      //           div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`;
      //           container.appendChild(div);
      //         }
      //         render(page + 1);
      //       }, 0);
      //     };
      //     render(page);
      //     console.timeEnd("列表时间");
      //   };
      const renderList = async () => {
        const list = await getList();
        const total = list.length;
        const page = 0;
        const limit = 200;
        const totalPage = Math.ceil(total / limit);
        const render = (page) => {
          if (page >= totalPage) return;
          // 使用requestAnimationFrame代替setTimeout
          requestAnimationFrame(() => {
            for (let i = page * limit; i < page * limit + limit; i++) {
              const item = list[i];
              const div = document.createElement("div");
              div.className = "sunshine";
              div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`;
              container.appendChild(div);
            }
            render(page + 1);
          });
        };
        render(page);
        console.timeEnd("列表时间");
      };

      renderList();
    </script>
  </body>
</html>
